<template>
    <TodoHeader @add-todo="handleAddTodo" />
    <TodoList>
      <TodoItem
        v-for="todo in todos"
        :key="todo.id"
        v-bind="todo"
        @toggle="handleToggle"
        @edit="handleEdit"
        @del="handleDel"
      ></TodoItem>
    </TodoList>
    <TodoFooter
      :todos="todos"
      @toggle-all="handleToggleAll"
      @clear-done="handleClearDone"
      @clear-all="handleClearAll"
    />
  </template>
  
  <script setup>
  import TodoHeader from './components/TodoHeader.vue'
  import TodoList from './components/TodoList.vue'
  import TodoItem from './components/TodoItem.vue'
  import TodoFooter from './components/TodoFooter.vue'
  
  import useTodos from './hooks/useTodos'
  
  const {
    todos,
    handleAddTodo,
    handleToggle,
    handleEdit,
    handleDel,
    handleToggleAll,
    handleClearDone,
    handleClearAll,
  } = useTodos()
  </script>
  
  <style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  </style>